<template>
	<view class="content">
		<image :src="data.friend_avatar" style="height: 100vh;" mode="heightFix"></image>
		<view class="ftbg">
			<image :src="data.friend_avatar" style="width: 160rpx;height: 160rpx;margin-top: 250rpx;border-radius: 16rpx;" mode=""></image>
			<view style="margin-top: 10rpx;color: white;font-size: 12rpx;">
				{{data.friend_name}}
			</view>
			
			<view style="margin-top: 130rpx;color: white;">
				{{data.friend_name}}向你发起视频聊天
			</view>
			
		</view>
		
		<view style="position: fixed;bottom: 100rpx;left: 0rpx;width: 100%;display: flex;justify-content: center;align-items: center;">
			<image @click="cancel" src="/static/images/icon_guad.png" style="width: 120rpx;height: 120rpx;border-radius: 60rpx;" mode=""></image>
			<image @click="agree" src="/static/images/icon_hup.png" style="width: 120rpx;height: 120rpx;border-radius: 60rpx;margin-left: 300rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commonData from '../../../common/common.js'
import utils from '../../../utils/index.js';
	export default {
		data() {
			return {
				id:'',
				data:{},
				agreestatus:false,
				cancelstatus:false
			}
		},
		computed:{
			...mapState({
				
			})
		},
		onUnload() {
			if(!this.agreestatus && !this.cancelstatus){
				this.cancel()
				this.$store.commit(`common/setStatusState`, "normal")
			}
			
		},
		onLoad({id}) {
		    this.id = id
			this.data = this.$store.state.common.videocallinfo
		},
		methods: {
			agree:async function(){
				const ret = await utils.checkPermission("请打开摄像头和麦克风权限")
				// if(!ret){
				// 	return ret
				// }
				const innerAudioContext = commonData.commonData.audioCtx
				innerAudioContext.stop()
				uni.showLoading({
					title:"请稍候.."
				})
				this.agreestatus = true
				this.$socket.send({
					type:"agreevideocall",
					data:{
						friend_id:this.data.friend_id,
						friend_name:this.data.friend_name,
						friend_avatar:this.data.friend_avatar
					}
				})
				const _this = this
				uni.hideLoading()
				uni.redirectTo({
					url:"/pages/chat/friend/videocallrtc?id="+_this.data.friend_id+"&name="+_this.data.friend_name+"&roomId=videocall_"+_this.data.friend_id+"_"+this.$store.state.user.user.id
				})
			},
			cancel:async function(){
				// const ret = await utils.checkPermission("请打开摄像头和麦克风权限")
				// if(!ret){
				// 	return ret
				// }
				const innerAudioContext = commonData.commonData.audioCtx
				innerAudioContext.stop()
				this.cancelstatus = true
				this.$socket.send({
					type:"refusevideocall",
					data:{
						friend_id:this.data.friend_id,
						friend_name:this.data.friend_name,
						friend_avatar:this.data.friend_avatar
					}
				})
				this.$store.commit(`common/setStatusState`, "normal")
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom,#666,#222);
	}
	.ftbg{
		width: 100%;
		height: 100vh;
		top: 0rpx;
		left: 0rpx;
		background: #00000099;
		backdrop-filter: blur(20px);
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>